<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui的表格</title>
    <!--引入layui的核心css文件-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <!--layui的核心js文件（采用模块化引入）-->
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <!-- 
    表格
        class="layui-table"
        常用属性
          lay-even 如果设置了该属性，则可以隔行换色
          lay-skin 设置表格边框风格
            line 行边框风格
            row 列边框风格
            nob 无边框风格
          lay-size 设置表格的尺寸
            smx 小尺寸
            lg  大尺寸
  -->
  <table class="layui-table">
    <colgroup>
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>昵称</th>
        <th>加入时间</th>
        <th>签名</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
      </tr>
      <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
    </tbody>
  </table>


  <table class="layui-table" lay-even lay-skin="row">
    <colgroup>
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>昵称</th>
        <th>加入时间</th>
        <th>签名</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
      </tr>
      <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
      <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
      </tr>
      <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
    </tbody>
  </table>

</body>

</html>